/*
 * @Author: 肖思汗 
 * @Date: 2025-07-10 17:22:07 
 * @Last Modified by:   肖思汗 
 * @Last Modified time: 2025-07-10 17:22:07 
 */
/*
 * @Author: 肖思汗 
 * @Date: 2025-05-19 21:38:58 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-10 17:21:44
 */

import { Tabbar } from "@nutui/nutui-react-taro";
import { Image, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { observer } from "mobx-react-lite";
import { ReactNode } from "react";
import Api from "src/api/Api";
import utilsApi from "src/api/utilsApi";
import utils from "src/utils/utils";
import utilsStore from "src/utils/utilsStore";
import designerRender from "../Designer/designerRender";
import stickerModelStore from "../StickerModel/stickerModelStore";
import templateModelStore from "../TemplateModel/templateModelStore";
import textModelStore from "../TextModel/textModelStore";
import styles from "./bottomBtns.module.less";
import materialsPNG from "./img/materials.png";
import templatePNG from "./img/template.png";
import textPNG from "./img/text.png";
import uploadImgPNG from "./img/uploadImg.png";


interface Iprops {
    children?: ReactNode
}

// 编辑器的底部按钮
const BottomBtns = observer((props: Iprops) => {

    const icon = (url: string) => (
        <Image src={url} className={styles.tabbarIcon} mode="widthFix" />
    );

    // 上传新的图片
    const upload = async () => {
        const file = await utils.selectFile();

        if (file) {
            let tempFilePath = file.tempFilePaths[0];
            Taro.showLoading({ title: "上传中..." });
            const url = await utilsApi.uploadOss(tempFilePath, Api.ossDirectory);
            designerRender.addImg(url);
            Taro.hideLoading();
        }
    }

    return (
        <View
            className={styles.bottomBtns}
            style={{
                paddingBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
            }}
        >
            <Tabbar
                className={styles.tabbar}
                value={-1}
                onSwitch={async (value) => {
                    switch (value) {
                        case 0:
                            stickerModelStore.setShow(true);
                            break;
                        case 1:
                            await designerRender.addText("优T设计");
                            await textModelStore.set({ show: true });
                            break;
                        case 2:
                            upload();
                            break;
                        case 3:
                            templateModelStore.setShow(true);
                            break;
                    }
                }}
            >
                <Tabbar.Item title="贴纸" icon={icon(materialsPNG)} />
                <Tabbar.Item title="文字" icon={icon(textPNG)} />
                <Tabbar.Item title="传图" icon={icon(uploadImgPNG)} />
                <Tabbar.Item title="模版" icon={icon(templatePNG)} />
            </Tabbar>
        </View>
    );
});

export default BottomBtns;

